<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <view class="p1756109559">
    <div style="position: relative;z-index: 999;">
      <u-order-pop @success="payTypeClick(form, 1)" :taskForm="form" ref="orderPop"></u-order-pop>
    </div>
    <uv-popup closeable ref="payPopup" @change="popPwdChange" mode="bottom" :close-on-click-overlay="false">
      <view>
        <u-pay @payChange="payClick" ref="payVue"></u-pay>
      </view>
    </uv-popup>
    <uv-popup ref="popPwdRef" mode="center" round="10" @change="popPwdChange" :close-on-click-overlay="false" closeable>
      <view class="pay-pop">
        <view class="p1755763657">输入密码</view>
        <view class="p1755763837">
          <uv-input placeholder="请输入支付密码" type="password" border="surround" v-model="paymentForm.password"></uv-input>
        </view>
        <view @click="confirmPaymentTap" class="p1755763584">确认支付</view>
      </view>
    </uv-popup>
    <uv-popup round="10" ref="timePopup" mode="bottom">
      <div class=" p1756277855">
        <uv-steps dot activeColor="#E60012" current="4" direction="column">
          <uv-steps-item title="订单提交成功" :desc="form.create_time"></uv-steps-item>
          <uv-steps-item title="订单已支付" :desc="form.pay_time"></uv-steps-item>
          <uv-steps-item title="骑士已接单" :desc="form.accept_orders_time"></uv-steps-item>
          <uv-steps-item title="订单已送达" :desc="form.complete_time"></uv-steps-item>
        </uv-steps>
      </div>
    </uv-popup>
    <u-my-layOut :navbarOption="{ bgColor: form.status == 2 || form.status == 7 ?  'rgba(255, 255, 255, 0)' : '#ffffff', title: '' }" :color="{ statusBarHeightColor: form.status == 2 || form.status == 7 ?  'rgba(255, 255, 255, 0)' : '#ffffff' }">
      <template v-slot:header>
        <view @click="openOrderTime" v-if="form.status == 2 || form.status == 7" class="fac jcsb mt30 p1756174018">
          <view v-if="form.status == 7">正在为您召唤骑士</view>
          <view v-if="form.status == 2 && form.service_status == 2 && (form.type == 4 || form.type == 5) ">骑士正在为您上门
          </view>
          <view v-else-if="form.status == 2 && form.service_status == 2">{{form.neighbor_worker_id ? '骑士正在赶往取货地' :
							'正在为您召唤骑士'}}</view>
          <view v-if="form.service_status == 3">{{form.type == 4 || form.type == 5 ? '骑士上门服务中' : '骑士正在为您送货'}}</view>
          <uv-icon size="40rpx" color="#C9CACA" name="arrow-right"></uv-icon>
        </view>
      </template>
      <template v-slot:main>
        <div style="overflow-y: auto;height: 100%;">
          <uv-sticky customNavHeight="0" :offset-top="-100">
            <u-map :orderForm="form" v-if="form.status == 2 || form.status == 7"></u-map>
          </uv-sticky>
          <view class=" p1755916753">
            <view class="p1756105454" :class="loading ? 's1755925490' + (' p1756105454-' + form.status) : 'p1756105454-' + form.status">
              <view class="p1755918482 s1755925506">

                <u-order-status v-if="form.status == 2 || form.status == 7" :orderForm="form"></u-order-status>
                <u-service-status v-if="form.status == 6" :orderForm="form"></u-service-status>
                <view v-if="form.status != 2 && form.status != 6&& form.status != 7" class="p1755916777 fac s1755925462">
                  <view v-if="form.status == 1" class="fac" style="line-height: 1;">
                    <div style="display: inline;">请在</div>
                    <view>
                      <uv-count-down :time="form.create_time_over" format="mm:ss" autoStart millisecond></uv-count-down>
                    </view>
                    <div style="display: inline;">内支付</div>
                  </view>
                  <view style="line-height: 1;" v-if="form.service_status == 4">订单已完成</view>
                  <view class="fac">
                    <uv-tags v-if="form.type && typeForm[form.type].text" :borderColor="typeForm[form.type]['bgColor']" :text="typeForm[form.type].text" :bgColor="typeForm[form.type]['bgColor']" :color="typeForm[form.type]['color']" size="mini"></uv-tags>
                    <uv-icon v-if="form.service_status == 4" @click="openOrderTime" size="40rpx" color="#C9CACA" name="arrow-right"></uv-icon>
                  </view>
                </view>
                <view class="fz28 pt20" style="color: #898989;" v-if="form.service_status == 4">感谢您对邻事通的信任，期待再次光临。</view>
                <view class="fz28 pt20" v-if="form.type == 4 && form.status == 1">现在支付，更早为您安排人员</view>
                <view v-if="form.type != 4 && form.status == 1" class="fac fz28 pt10 s1755925462">现在支付，预计<view style="color: #F39800">{{form.deliver_time}}</view>送达</view>
                <view v-if="form.status == 1" class="fac pt30 s1755925462 p1755918679" style="justify-content: flex-end;">
                  <uv-button v-if="form.status == 1" @click="_cancelOrder" iconColor="#fff" shape="circle" :plain="true" :hairline="true" text="取消订单"></uv-button>
                  <view style="width: 60%;" class="pl20" v-if="form.status == 1 && form.is_pay == 0">
                    <uv-button @click="payTypeClick(form)" color="#E60012" shape="circle" :hairline="true" :text="'立即支付 ¥' + form.order_price"></uv-button>
                  </view>
                </view>
              </view>
              <view class="p1755917918">
                <view class="fz34 pb30 f" style="align-items: baseline;">
                  {{form.type == 4 || form.type == 5 ? '需求信息' : '货品信息'}}
                  <!-- <view class="fz30" v-if="form.open_delivery_code"> ({{form.open_delivery_code}})</view> -->
                </view>
                <view class="p1755839435  pb30" v-if="form.goods_img && form.goods_img.length">
                  <view class="p1755839504" v-for="(child, childIndex) in form.goods_img" :key="childIndex">
                    <img @click="previewImageTap(form.goods_img, childIndex)" class="p1755839504-1" :src="child" alt="">
                  </view>
                </view>
                <view v-if="form.describe" class="bt pt30  s1755925462">{{form.describe}}</view>
                <view v-if="(form.type == 1 || form.type == 2) && (form.goods_type && form.goods_type.name)" class="f  jcsb ">
                  <view class="c898989 wsnowrap">{{form.goods_type.name}}</view>
                  <view class="s1755925462">{{form.weight}}公斤</view>
                </view>
                <view class="pt30" v-if="form.type == 3">
                  <view class="fac pt20 bt">
                    <view>预估商品费</view>
                    <view class="pl30 s1755925462">{{Number(form.estimate_goods_price) ? ('¥' + form.estimate_goods_price) : '参考市场价'}}
                    </view>
                  </view>
                  <view class="fz28 " style="color: #898989">价格仅供参考，最终以骑手实际购买价格为准</view>
                </view>
              </view>
              <view v-if="form.type != 1 && form.type != 2" class="p1755917918">
                <view class="fz34">实付金额</view>
                <view class="fac jcsb pt30 pb30">
                  <template v-if="(form.type == 4 && form.type == 5) || (form.type == 3 && form.is_initiation_of_payments == 0) || (form.type == 3 && form.is_pay_advance_price == 1)">
                    <view class="c898989">{{form.type == 3 ? '实付商品费' : '实付服务费'}}</view>
                    <view v-if="form.advance_payment_price" class="s1755925462">{{form.type == 3 && form.is_pay_advance_price == 1 ? '¥' +
								form.advance_payment_price
								: ''}}</view>
                  </template>
                  <template v-if="form.type == 3 && form.is_initiation_of_payments == 1 && form.is_pay_advance_price != 1">
                    <view class="" style="color: #E60012;">实付商品费（¥{{form.advance_payment_price}}）</view>
                    <view style="color: #E60012;line-height: 1;" class="s1755925462 fac" @click="$refs.orderPop.openFun()">
                      去支付<uv-icon size="34rpx" color="#E60012" name="arrow-right"></uv-icon>
                    </view>
                  </template>
                </view>
                <view v-if="form.type == 3 && form.is_pay_advance_price == 1" class="fac jcsb pb30">
                  <view class="c898989">购买小票</view>
                  <view style="color: #333;line-height: 1;" class="s1755925462 fac" @click="previewAdvanceImageTap">
                    查看<uv-icon size="34rpx" color="#333" name="arrow-right"></uv-icon>
                  </view>
                </view>
                <view v-if="form.type == 3" class="fac jcsb pb30">
                  <view class="c898989">跑腿费</view>
                  <view class="s1755925462">{{form.order_price}}</view>
                </view>
                <view v-if="form.type == 4 || form.type == 5" class="fac jcsb pb30">
                  <view class="c898989">赏金</view>
                  <view class="s1755925462">{{form.bounty}}</view>
                </view>
                <view class="fac s1755925462 bt pt20 jcsb">
                  <view class="c898989">合计</view>
                  <view class="f " style="align-items: baseline;">
                    <view>¥</view>
                    <view class="fz40">{{form.total}}</view>
                  </view>
                </view>
              </view>
              <view class="p1755917918 ">
                <view class="fz34">订单信息</view>
                <u-order-desc :orderForm="form"></u-order-desc>
              </view>
            </view>
            <div class="pb30"></div>
          </view>
        </div>
      </template>
      <template v-slot:footer>
      </template>
    </u-my-layOut>

  </view>
</template>

<script>

import { neighborWorkerProfileCancelOrder, getUserOrderInfo } from '@/api/index.js'
import { generateRangesUntilMidnight, formatDateCustom } from '@/util/tools.js'
import payVue from '@/components/pay.vue'
import mapVue from './components/map.vue'
import orderStatusVue from './components/orderStatus.vue'
import orderPopVue from './components/orderPop.vue'
import serviceStatusVue from './components/serviceStatus.vue'
import orderDescVue from './components/orderDesc.vue'
import payMixin from './mixin/payMixin.js'
import dataJsonMixin from './mixin/dataJson.js'
import myLayOutVue from "./components/layOut.vue";
export default {
  components: {
    "u-my-layOut": myLayOutVue,
    'u-pay': payVue,
    'u-order-pop': orderPopVue,
    'u-map': mapVue,
    'u-order-desc': orderDescVue, 'u-order-status': orderStatusVue, 'u-service-status': serviceStatusVue
  },
  mixins: [payMixin, dataJsonMixin],
  data() {
    return {
      height: 0,
      routeQuery: {},
      loading: true,
      isOnShow: false,
      form: {}
    }
  },
  onShow() {
    if (this.isOnShow) {
      this._initPage()
    }
  },
  onHide() {
    this.isOnShow = true
  },
  onLoad(options) {
    if (options) this.routeQuery = options
    this._initPage()
  },
  methods: {
    previewAdvanceImageTap(current = 1) {
      let urls = []
      if (this.form.advance_payment_images && this.form.advance_payment_images.length) urls = JSON.parse(JSON.stringify(this.form.advance_payment_images))
      uni.previewImage({
        urls: urls,
        current: current,
        fail() {
          this.$uv.toast('预览图片失败');
        },
      });
    },
    openOrderTime() {

      this.$refs.timePopup.open();
    },
    payTypeClose() {
      this.$set(this.paymentForm, 'password', '');
    },
    popPwdChange() {
      this.$set(this.paymentForm, 'password', '');

    },
    payOrderFun() {
      this.$refs.popPwdRef.close();
      this._initPage()
    },

    cancelOrderClick() {
      uni.navigateTo({
        url: '/pages-worker/cancelOrder?id=' + this.form.id
      });
    },
    _cancelOrder() {
      uni.showLoading({ title: '取消中', mask: true })
      neighborWorkerProfileCancelOrder({ id: this.form.id }).then(res => {
        uni.hideLoading()
        if (res.code === 200) {
          this._initPage()
        }
      })
    },
    previewImageTap(urls, current) {
      uni.previewImage({
        urls: urls,
        current: current,
        fail() {
          this.$uv.toast('预览图片失败')
        },
      });
    },
    _initPage() {
      if (!this.loading) uni.showLoading({ title: '加载中', mask: true })
      if (this.routeQuery.id) {
        getUserOrderInfo(this.routeQuery.id).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            uni.hideLoading()
            let form = res.result
            if (form.deliver_time) {
              let deliver_time = form.deliver_time.split('~')
              form.deliverTime = deliver_time[deliver_time.length - 1]
            }
            if (form.create_time) {
              form.create_time_over = (new Date(this.parseIosCompatibleDate(form.create_time)).getTime() + (15 * 1000 * 60)) - new Date().getTime()
            }
            this.form = form
            setTimeout(() => {
              this.loading = false
            }, 1000);

          }
        })
      }

    }
  }
}
</script>
<style>
</style>
<style lang="scss">
page {
  background: #f7f8f8 !important;
}

::v-deep .p1755916753 {
  color: #333333;

  .uv-tags--mini {
    height: inherit !important;
    line-height: 1 !important;
    padding: 10rpx 20rpx !important;
    margin-left: 20rpx !important;
    font-size: 14px !important;

    .uv-tags__text--mini {
      line-height: 1 !important;
    }
  }

  .uv-count-down__text {
    /* color: #F39800 */
    font-size: 55rpx !important;
    color: #333 !important;
    line-height: 1 !important;
  }
}

::v-deep .p1755918679 {
  .uv-button {
    padding: 0 30rpx !important;
    height: 80rpx !important;
  }
}
</style>

<style lang="scss" scoped>
@import "./common.scss";
.p1756105454-7,
.p1756105454-2 {
  position: relative;
  z-index: 971;
  margin-top: -25vh;

  .p1755918482 {
    border-radius: 20rpx;
    background: #fff;
    padding: 30rpx;
    box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  }
}

.pb15 {
  padding-bottom: 15rpx;
}

.pt15 {
  padding-top: 15rpx;
}

.p1755930006 {
  width: 76vw;
  text-align: right;
  word-break: break-all;
}

.wsnowrap {
  width: 180rpx;
  white-space: nowrap;
}

.fz40 {
  font-size: 40rpx;
}

.bt {
  border-top: 2rpx solid #efefef;
}

.bb {
  border-bottom: 2rpx solid #efefef;
}

.mb40 {
  margin-bottom: 40rpx;
}

.c898989 {
  color: #898989;
}

.p1755918482 {
  padding-top: 20rpx;
}

.p1755917918 {
  margin-top: 30rpx;
  padding: 30rpx 30rpx;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
}

.p1755916753 {
  font-size: 30rpx !important;
  padding-left: 30rpx;
  padding-right: 30rpx;
  padding-bottom: 30rpx;
  z-index: 2;

  .p1755916777 {
    font-size: 50rpx;
    padding-top: 40rpx !important;
    font-weight: 700;
  }
}

.p1755839435 {
  display: flex;
  width: 100%;
}

.p1755839504-1 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.p1755839504::before {
  display: block;
  content: "";
  padding-bottom: 100%;
}

.p1755839504 {
  width: calc(33.33333% - 16rpx) !important;
  position: relative;
}

.p1755839504:nth-child(2) {
  margin: 0 24rpx;
}

.p1756277855 {
  padding: 80rpx 40rpx 0 30rpx;
}

.p1756174018 {
  width: calc(100vw - 60rpx);
  background-color: #fff;
  left: 30rpx;
  border-radius: 10rpx;
  padding-left: 30rpx;
  padding-right: 30rpx;
  font-size: 32rpx;
  height: 80rpx;
  box-sizing: border-box;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
  position: absolute;
  z-index: 973;
  margin-top: 20rpx;
}
</style>